<template>
	<el-card shadow="never" style="margin: 15px 0px; padding: 0px">
		<template #header>
			<div class="card-header">
				<span>应用概况</span>
				<el-button text class="button" icon="el-icon-setting" @click="designApp">管理</el-button>
			</div>
		</template>
		<div class="about">
			<div class="logo">
				<el-icon style="font-size:80px;cursor: pointer;" class="app-icon" :style="{'background-color': backColor, 'color': iconColor}"><component :is="appIcon" /></el-icon>
				<h2 style="margin-top: 10px">{{appName}}</h2>
			</div>
			<div class="tips">
				{{appDescribe}}
			</div>
		</div>
	</el-card>
</template>

<script>
	export default {
		title: "应用概况",
		icon: "el-icon-present",
		description: "应用的概况说明",
		props:{
			data:Object
		},
		watch:{
			data:{
				handler(){
					if (typeof(this.data.appInfo) != 'undefined'){
						this.appName = this.data.appInfo.appName;
						this.appIcon = this.data.appInfo.appIcon;
						this.backColor = this.data.appInfo.backColor;
						this.iconColor = this.data.appInfo.iconColor;
						this.appDescribe = this.data.appInfo.describe;
						this.appCode = this.data.appInfo.appCode;
					}
				},
				deep:true
			}
		},
		data() {
			return {
				appCode: '',
				appName: null,
				appIcon: '',
				backColor: '',
				iconColor: '',
				appDescribe: ''
			}
		},
		methods: {
			designApp(){
				this.$router.push({
					path: '/app/store/design',
					query: {
						appId: this.appCode
					}
				});
			},
		}
	}
</script>

<style scoped>
	.about { height: 250px; overflow: hidden;}
	.about .logo {text-align: center;}
	.about .logo img {vertical-align: bottom;width: 100px;height: 100px;margin-bottom: 20px;}
	.about .logo h2 {font-size: 24px;font-weight: normal;display: flex;align-items: center;justify-content: center;}

	.tips {margin-top: 10px;padding:0 5px;font-size: 15px; line-height: 150%;}
	.tips-item {display: flex;align-items: center;justify-content: center;padding:7.5px 0;}
	.tips-item-icon {width: 40px;height:40px;display: flex;align-items: center;justify-content: center;border-radius: 50%;font-size: 18px;margin-right: 20px;color: var(--el-color-primary);background: rgba(180,180,180,0.1);}
	.tips-item-message {flex: 1;font-size: 14px;}

	.actions {text-align: center;margin: 40px 0 20px 0;}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.app-icon{
		width: 120px;
		height: 120px;
		fill: rgba(253, 253, 253, 0.65) !important; 
		background-color: #409EFF;
		padding: 10px; 
		border-radius: 12px;
	}
</style>
